<template>
  <div class="login-page">
    <login-header></login-header>

    <div class="login-frame" v-show="isShow">
      <p class="login-title">忘记密码</p>
      <div class="user-name">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-smartphone"></use>
        </svg>
        <input type="text" class="self-input" placeholder="请输入注册的手机号" v-model.trim="phone" maxlength="11"
               @blur='changeCount()'/>
        <p class="login-tips" ref="phoneNum"></p>
      </div>
      <div class="user-name">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-zap"></use>
        </svg>
        <button class="save-btn-two send-num" @click="handleSendClick" v-show="!sendClass">获取验证码</button>
        <button class="save-btn-two send-num hasSend" v-show="sendClass">{{secNum}}s</button>
        <input type="text" class="self-input" v-model.trim="phoneCode" @blur='changeMas()' placeholder="请输入验证码"/>
        <p class="login-tips" ref="phoneCode"></p>
      </div>
      <button class="save-btn-two" @click="handleNext()">继续</button>
    </div>


    <div class="login-frame" v-show="!isShow">
      <p class="login-title">忘记密码</p>
      <div class="user-name">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-lock"></use>
        </svg>
        <input type="text" class="self-input" placeholder="请输入新密码" v-model.trim="passWord" @blur='handlePassWord()'/>
        <p class="login-tips" ref="passWord"></p>
      </div>
      <div class="user-name">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-lock"></use>
        </svg>
        <input type="text" class="self-input" placeholder="请再次输入新密码" v-model.trim="passWordAgain"
               @blur='handlePassWordAgain()'/>
        <p class="login-tips" ref="passWordAgain"></p>
      </div>
      <!--<p class="login-tips">密码规则：6-16位，必须包含数字、字母或下划线中任意两种</p>-->
      <button class="save-btn-two" @click="setPassword">确定</button>
    </div>
  </div>
</template>

<script>
  import LoginHeader from '@/components/LoginHeader'
  import util from '@/lib/util';
  import {LOGIN_PASSWORD_SAME_CODE, SUCCESS_CODE} from '../../lib/returnCode';

  export default {
    name: 'LoginForm',
    components: {
      LoginHeader
    },
    data() {
      return {
        sendClass: false,
        phoneCode: '',
        passWord: '',
        passWordAgain: '',
        phone: '',
        isPhone: false,
        num1: false,
        isPassWord: false,
        num2: false,
        isShow: true,
        secNum: 60
      }
    },
    created() {
    },
    methods: {
      //校验验证码
      changeMas() {
        if (!this.phoneCode.length) {
          this.$refs.phoneCode.innerHTML = '请输入验证码'
          return
        }
        if (!/^\d{6}$/.test(this.phoneCode)) {
          this.$refs.phoneCode.innerHTML = '验证码错误'
//					this.phoneCode = '';
          this.num1 = false
        }
      },
      //验证电话号码
      changeCount() {
        if (!this.phone.length) {
          this.$refs.phoneNum.innerHTML = '请输入手机号'
          return
        }
        let reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        if (!reg.test(this.phone)) {
          this.$refs.phoneNum.innerHTML = '手机号格式不对'
          this.isPhone = false
        } else {
          this.$refs.phoneNum.innerHTML = '';
          this.isPhone = true;
        }
      },
      //发送验证码
      handleSendClick() {
        if (this.isPhone == true) {
          // 判断手机号是否存在
          util.ajax.get(`user/checkMobile/${this.phone}`).then((res) => {
            if (res.code == SUCCESS_CODE) {
              if (!res.data) {
                this.$message.error('该手机号尚未注册');
                return;
              } else {
                this.sendClass = true;
                var that = this
                var timer = setInterval(function () {
                  that.secNum--;
                  if (that.secNum == 0) {
                    that.sendClass = false;
                    that.secNum = 60;
                    clearInterval(timer);
                  }
                }, 1000)
                util.ajax.post('/vc', {
                  'account': this.phone
                }).then((res) => {
                });
              }
            }
          });
        }
      },
      //继续
      handleNext() {
        if (!this.phone.length) {
          this.$refs.phoneNum.innerHTML = '请输入手机号'
          return
        }
        let reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        if (!reg.test(this.phone)) {
          this.$refs.phoneNum.innerHTML = '手机号格式不对'
//					this.phone = '';
          this.isPhone = false
        }

        if (!this.phoneCode.length) {
          this.$refs.phoneCode.innerHTML = '请输入验证码'
          return
        }
        if (!/^\d{6}$/.test(this.phoneCode)) {
          this.$refs.phoneCode.innerHTML = '验证码错误'
//					this.phoneCode = '';
          this.num1 = false
        } else {
          util.ajax.post('/verify', {
            'account': this.phone,
            'code': this.phoneCode
          }).then((res) => {

            if (res.code == 1009 || res.code == 1011) {
              this.$refs.phoneCode.innerHTML = res.msg;
              this.num1 = false
            }
            if (res.code == 1) {
              this.$refs.phoneCode.innerHTML = '';
              this.num1 = true;
              this.isShow = false
            }
          });
        }
      },

      //输入新密码
      handlePassWord() {

        let pPattern = /^(?!\d+$)(?![A-Za-z_]+$)[a-zA-Z0-9_]{6,16}$/;
        if (pPattern.test(this.passWord)) {
          this.$refs.passWord.innerHTML = ''
          this.isPassWord = true;
        } else {
          this.$refs.passWord.innerHTML = '请输入正确格式的密码';
          this.isPassWord = false;
          return
        }


      },
      //再次输入新密码
      handlePassWordAgain() {
        this.$refs.passWordAgain.innerHTML = '';
        if (this.passWord == this.passWordAgain) {
          this.$refs.passWordAgain.innerHTML = '';
          this.num2 = true;
        } else {
          this.$refs.passWordAgain.innerHTML = '两次密码不一样';
          this.num2 = false;
          return
        }
      },
      //确定
      setPassword() {
        this.handlePassWord();
        this.handlePassWordAgain();
        if (this.isPassWord && this.num2) {
          util.ajax.post('/user/updatePwdForFind', {
            'account': this.phone,
            "password": this.passWord
          }).then((res) => {
            if (res.code == SUCCESS_CODE) {
              this.$message({
                message: '设置成功',
                type: '',
                center: true,
                customClass: 'self-tips-one',
              });
              var that = this;
              setTimeout(function () {
                that.isShow = !that.isShow
								that.$router.push({path: '/'});
              }, 3000)
            } else if (res.code == LOGIN_PASSWORD_SAME_CODE) {


              this.$message.error(res.msg)
            } else {
              this.$message.error('操作失误');
            }
          });
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "@/assets/css/style.scss";

  .login-page {
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background: $borderbottomColor;
    .login-frame {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -184px;
      margin-top: -166px;
      height: 312px;
      padding: 30px 50px 40px;
      border: 1px solid $listborderColor;
      background: $colorWhite;
      border-radius: 8px;
      text-align: center;
      .login-title {
        padding-bottom: 30px;
        font-size: $fs16;
        line-height: 20px;
        color: $vfConcentColor;
      }
      .user-name,
      .pass-word {
        position: relative;
        .send-num {
          position: absolute;
          top: 0px;
          right: 0px;
          display: block;
          width: 100px;
          height: 42px;
          font-size: $fs14;
          border-left: 0px;
          border-top-left-radius: 0px;
          border-bottom-left-radius: 0px;
        }
        .hasSend {
          color: $vfConcentColor;
          background: #d7dae0;
        }
        .icon {
          position: absolute;
          top: 10px;
          left: 18px;
          width: 20px;
          height: 20px;
          color: $vfConcentColor;
        }
        .self-input {
          padding: 0px 20px 0px 48px !important;
          width: 202px;
          height: 40px;
          line-height: 40px;
          font-size: $fs14;
          color: $listTitleColor;
          border: 1px solid $listTitleColor;
          background: $listBgColor;
          border-radius: 20px;
        }
        .login-tips {
          width: 220px;
          padding-left: 48px;
          text-align: left;
          font-size: $fs12;
          line-height: 20px;
          height: 20px;
          color: $borderColor;
        }
      }
      .login-forget {
        margin-bottom: 20px;
        span {
          float: left;
          font-size: $fs14;
          line-height: 24px;
          color: $mainborderColor;
          cursor: pointer;
          &:nth-child(2) {
            float: right;
          }
        }
      }
      .save-btn-two {
        margin-bottom: 30px;
        width: 270px;
      }
      .no-number {
        color: $vfConcentColor;
        em {
          font-size: $fs16;
          line-height: 20px;
          color: $mainborderColor;
          cursor: pointer;
        }
      }
    }
  }

  .login-tips {
    width: 220px;
    text-align: left;
    font-size: $fs12;
    line-height: 20px;
    height: 20px;
    color: $borderColor;
  }
</style>
